<template>
  <div id="mine">
    <van-nav-bar title="我的" :fixed=true :border=false style="height:2.5rem"></van-nav-bar>
    <van-cell-group style="margin-top:2.4rem">
      <van-cell style="background-color: #3bba63;color:#FFF;" label-class="labelClass" is-link center>
        <template alot="title">
          <!-- 已登录状态 -->
          <div class="personMsg" v-if="userInfo.token" @click="goToUserCenter">
            <img class="iconImage" :src="user_imgae.login_icon" alt="">
            <div class="sex" v-if="userInfo.sex">
              <img :src="userInfo.sex=='1'?user_image.female:user_image.male" alt="">
            </div>
            <div class="personInfo" v-if="userInfo.token">
              <span>{{userInfo.user_name}}</span>
            </div>
          </div>
          <!-- 未登录状态 -->
          <div class="personMsg" v-if="!userInfo.token">
            <img class="iconImage" src="user_noLogin_icon" alt="">
            <div class="personInfo" v-if="!userInfo.token">
              <div @click="login">立即登录</div>
            </div>
          </div>
        </template>
      </van-cell>
    </van-cell-group>
    <van-row>
      <van-col span="6">
        <div style="">
          <van-col span="24">0</van-col>
          <van-col class="ziti" span="24">我的权益</van-col>
        </div>
      </van-col>
      <van-col span="6">
        <van-col span="24">0</van-col>
        <van-col class="ziti" span="24">我的里程</van-col>
      </van-col>
      <van-col span="6">
        <van-col span="24">0</van-col>
        <van-col class="ziti" span="24">红包卡卷</van-col>
      </van-col>
      <van-col span="6">
        <van-col span="24">0</van-col>
        <van-col class="ziti" span="24">我的钱包</van-col>
      </van-col>
    </van-row>


    <!-- 订单相关 -->
    <van-cell-group>
      <van-cell title="我的订单" icon="label" value="查看全部订单" is-link @click="goTomyOrder(-1)">
      </van-cell>
      <van-grid>
        <van-grid-item icon="paid" text="待付款" />
        <van-grid-item icon="underway-o" text="待出行" />
        <van-grid-item icon="smile-comment-o" text="待点评" />
        <van-grid-item icon="cash-o" text="退赔/转让" />
      </van-grid>
      <van-grid :border=false>
        <van-grid-item v-for="(order,index) in orderData" :key="index" :icon="order.icon" :text="reder.title"
          @click="goTomyOrder(index)" />
      </van-grid>
    </van-cell-group>

    <van-cell-groud style="margin-top:0.4rem">
      <!-- 优惠券单元格 -->
      <van-coupon-cell :coupons="coupons" icon="gold-coin" :chosen-coupon="chosenCoupon" @click="showList = true" />
      <!-- 优惠券列表 -->
      <van-popup v-model:show="showList" round position="bottom" style="height: 90%; padding-top: 4px;">
        <van-coupon-list :coupons="coupons" :chosen-coupon="chosenCoupon" :disabled-coupons="disabledCoupons"
          @change="onChange" @exchange="onExchange" />
      </van-popup>

    </van-cell-groud>


    <van-cell-groud style="margin-top:0.4rem">
      <van-cell title="联系客服" icon="phone" value="客服时间 07:00-22:00" is-link @click="showalert"></van-cell>
      <van-cell title="意见反馈" icon="comment-circle" value="" is-link ></van-cell>
    </van-cell-groud>
    <!-- 路由的出口 -->

    <transition name="router-slider" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>
<script >
import { ref } from 'vue';
import { Dialog } from 'vant';

export default {
  //客服消息
  setup() {
    const showalert = () => {
      Dialog.alert({
        message: '                 客服电话 123321123456                         微信 hpc13137100',
      }).then(() => {
        // on close
      });

    }
    const userInfo = ref('')

    // 优惠卷
    const coupon = {
      available: 1,
      condition: '无门槛\n最多优惠50元',
      reason: '',
      value: 150,
      name: '优惠券名称',
      startAt: 1640995200,
      endAt: 1665360000,
      valueDesc: '12',
      unitDesc: '元',
    };

    const coupons = ref([]);
    const showList = ref(false);
    const chosenCoupon = ref(-1);

    const onChange = (index) => {
      showList.value = false;
      chosenCoupon.value = index;
    };
    const onExchange = (code) => {
      console.log(code);
      coupons.value.push(coupon);
    };

    return {
      showalert,
      coupons,
      userInfo,
      showList,
      onChange,
      onExchange,
      chosenCoupon,
      disabledCoupons: [coupon],
    };
  },
};





</script>
<style>
.ziti {
  color: rgb(154, 154, 154);

}

.van-col {
  margin-top: 5px;
  margin-bottom: 5px;

}
</style>
